<!doctype html>
<html class="no-js">
<head>
    <title>ZTE 中兴金融科技</title>
    {{include 'base/style.html'}}
</head>

<body>


    <div class="row-content am-cf" >
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 widget-margin-bottom-lg" >
            <div class="widget am-cf">
                <div class=" widget-body-md widget-body tpl-amendment-echarts am-fr" style="min-height: 922px;" id="tpl-echarts">

                </div>
            </div>
        </div>
    </div>
{{include 'base/jsFile.html'}}
<script src="{{=URL('static','assets/js/echarts.min.js')}}?v2018"></script>
<script>
    $(function () {

 pageData['index']();

    })
    var pageData = {
        // ===============================================
        // 首页
        // ===============================================
        'index': function indexData() {

            var echartsA = echarts.init(document.getElementById('tpl-echarts'));
            option = {
                            "title": {
                                "text": ""
                            },
                            "legend": [{
                                "data":[{{for node in iggraph[0][iggraph.keys().index('nodes')]:}}'{{=node['name']}}',{{pass}}]
                            }],
                            "series": [{
                                "label": {
                                    "normal": {
                                        "show": true,
                                        "textStyle": {
                                            "fontSize": 12
                                        }
                                    }
                                },
                                "circular": {
                                    "rotateLabel": true
                                },
                                "focusNodeAdjacency": true,
                                "roam": true,
                                "top": 150,
                                "bottom": 80,
                                "data":  [{{for node in iggraph[0][iggraph.keys().index('nodes')]:}}{"category":'{{=node['name']}}',"name":'{{=node['name']}}',"count":'{{=node['count']}}',"draggable": "true"},{{pass}}],
                                "links": [{{for node in iggraph[0][iggraph.keys().index('relationships')]:}}{"category":'{{=node['type']}}',"source":'{{=node.start_node['name']}}',"target":'{{=node.end_node['name']}}'},{{pass}}],
                                "layout": "force",  //force是力向图，circular是和弦图
                                "force": {
                                    "repulsion": 300,
                                    "edgeLength" :150,
                                },
                                "symbolSize": 55,
                                edgeSymbol: ['none', 'arrow'],
                                "edgeLabel": {
                                    "normal": {
                                        "show": true,
                                        "textStyle": {
                                            "fontSize": 11
                                        },
                                        formatter: function(param) {
                                            return param.data.category;
                                        }
                                    }
                                },

                                "lineStyle": {
                                    "normal": {
                                        "width": 1,
                                        "curveness": 0.3,
                                        "opacity": 0.9
                                    }
                                },
                                "type": "graph",
                                "categories": [{{for node in iggraph[0][iggraph.keys().index('nodes')]:}}{"name":'{{=node['name']}}'},{{pass}}]
                            }],
                            "animationEasingUpdate": "quinticInOut",
                            "tooltip": {
                                "formatter": function(param) {
                                    if (param.dataType === 'edge') {
                                        return param.data.category + ': ' + param.data.target;
                                    }
                                    return param.data.category + ': ' + param.data.count;
                                }
                            },
                            "animationDurationUpdate": 1500
                        };

            echartsA.setOption(option);

            var triggerAction = function(action, selected) {
              legend = [];

              for (name in selected) {
                if (selected.hasOwnProperty(name)) {
                  legend.push({
                    name: name
                  });
                }
              }
              echartsA.dispatchAction({
                type: action,
                batch: legend
              });
            };

            //是否只选择一个图例
            var isFirstUnSelect = function(selected) {
              var unSelectedCount = 0;
              var SelectedCount = 0;
              for (name in selected) {
                if (!selected.hasOwnProperty(name)) {
                  continue;
                }else{
                    SelectedCount ++;
                }

                if (selected[name] == false) {
                  unSelectedCount++;
                }
              }

              return unSelectedCount == 1||SelectedCount==unSelectedCount;
            };

            //定义一个开关，第一次点击的时候才翻转。当所有都被选择的时候，再次点击不会只显示一个。
            var onOff = true;
            echartsA.on('legendselectchanged', function(obj) {
                  var selected = obj.selected;
                  var legend = obj.name;
//                  alert(selected);
              // 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event，导致本函数重复运行
              // 使得 无 selected 对象
              if (selected != undefined && isFirstUnSelect(selected) && onOff) {
                triggerAction('legendToggleSelect', selected);
//                onOff = false;
              }
            });
        }
    }

</script>
</body>
</html>